<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>11输入及状态改变事件</title>
    <style>
        input {
            outline: none;
            border: 1px solid #ccc;
            color: #999;
        }
        
        input.focus {
            border: 1px solid blue;
            box-shadow: 0 0 5px blue;
        }
        
        input.has-value {
            color: #000;
        }
    </style>
</head>

<body>
    <input type="text" id="content">
    <!-- <input type="text" maxlength="40" value="请输入关键字" name="SerchKey" class="inp-txt"
        onfocus="if(this.value=='请输入关键字'){this.value='';this.className='inp-txt inp-txt-active'}"
        onblur="if(this.value==''){this.value='请输入关键字';this.className='inp-txt'}" autocomplete="off"> -->
    <script>
        var content = document.getElementById('content');
        // content.oninput = function() {
        //         console.log(this.value);
        //     }
        // ie 浏览器
        // content.onpropertychange = function() {
        //     console.log(this.value);
        // }

        // 失去焦点触发，聚焦和失去焦点的没有变化的时候，不触发
        content.onchange = function() {
                console.log(this.value);
            }
            // 使用onfocus和onblur代替
        content.onfocus = function() {
            this.className += ' focus'
            if (this.value == '请输入关键字') {
                this.value = '';
                this.className += ' has-value';
            }
        }
        content.onblur = function() {
            if (this.value === '') {
                this.value = '请输入关键字';
                this.className = '';

            }
        }
    </script>
</body>

</html>